<template>
    <div class="main-container">
      <el-container class="home-container">
        <el-header>
          <span>网易云仿写</span>
          <el-button @click="logOut" type="info">退出</el-button>
        </el-header>
        <el-container>
          <el-aside width="200px" class="left-aside">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#ccc4c4"
              active-text-color="#000"
              :router="true">
              <el-menu-item index="welcome">
                <i class=" el-icon-platform-eleme"></i>
                <span slot="title">发现音乐</span>
              </el-menu-item>
              <el-menu-item index="search">
                <i class="iconfont iconyinle"></i>
                <span slot="title">搜素音乐</span>
              </el-menu-item>
              <el-menu-item index="order">
                <i class="iconfont icongedan"></i>
                <span slot="title">推荐歌单</span>
              </el-menu-item>
              <el-menu-item index="newsongs">
                <i class="iconfont icon-"></i>
                <span slot="title">最新音乐</span>
              </el-menu-item>
              <el-menu-item index="newmv">
                <i class="iconfont iconMV"></i>
                <span slot="title">最新MV</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    logOut () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang = "less" scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
.main-container{
  height: 100%;
}
  .home-container{
  height: 100%;
}
.el-header{
  background-color: #666666;
  display: flex;
  justify-content: space-between;
}
.el-header span{
  font-size: 25px ;
  color: #ffffff;
  margin: auto 0;
}
  .left-aside{
    height: 100%;
    background-color: #ccc4c4;
  }
</style>
